<div id="main-content">
    <!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
    <!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
    <div class="container">
        <div class="row">
            <div id="content" class="col-lg-12">
                <!-- PAGE HEADER-->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="page-header">
                            <!-- STYLER -->

                            <!-- /STYLER -->
                            <!-- BREADCRUMBS -->
                            <ul class="breadcrumb">
                                <li>
                                    <i class="fa fa-home"></i>
                                    <a href="index.html">首页</a>
                                </li>
                                <li>日程表</li>
                            </ul>
                            <!-- /BREADCRUMBS -->
                            <div class="clearfix">
                                <h3 class="content-title pull-left">日程表</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /PAGE HEADER -->
                <!-- CALENDAR -->
                <div class="row">
                    <div class="col-md-12">
                        <!-- BOX -->
                        <div class="box border">
                            <div class="box-title">
                                <h4><i class="fa fa-calendar"></i>日程表</h4>
                                <div class="tools">
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="input-group">
                                            <input ng-keypress="search()"  ng-model="inputClipName" type="text" value="" class="form-control" placeholder="Clip Title" id="event-title" />
                                                 <span class="input-group-btn">
                                                    <a href="javascript:;" id="add-event" class="btn btn-info" ng-click="search()"><i class="fa fa-search"></i></a>
                                                 </span>
                                        </div>
                                        <br/>
                                        <div>
                                            <ul class="nav nav-tabs">
                                                <li style="width:50%" class="{{ShowMyselfOrOthers?'active':''}}"><a ng-click="changeShowViewToMe()">查看我自己的日程</a></li>
                                                <li style="width:50%" class="{{!ShowMyselfOrOthers?'active':''}}"><a ng-click="changeShowViewToOther()">别人给我Book的日程</a></li>
                                            </ul>
                                        </div>
                                        <br/>
                                        <div class="box border blue" ng-show="ShowMyselfOrOthers">
                                        <div class="box-title">
                                            <!--<button class="btn btn-danger" ng-click="ClipExport()">Export</button>-->
                                            <h4><i class="fa fa-table"></i>符合条件的日程信息</h4>
                                            <div class="tools">
                                                <i class="fa fa-refresh fa-spin" placeholder="刷新" ng-click="loadClipList()"></i>
                                            </div>
                                        </div>
                                        <div class="box-body" style="overflow: auto;height: 540px">
                                            <table class="table table-hover" >
                                                <thead>
                                                <tr>
                                                    <th style="width:40%">内容</th>
                                                    <th style="width:60%">开始时间</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in clipsBookByMe|filter:inputClipName" ng-click="ClipDetailShow(item.id)">
                                                    <td style="width:40%" ng-bind="item.name"></td>
                                                    <td style="width:60%" ng-bind="TimeShow(item.startTime)"></td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="box border blue" ng-show="!ShowMyselfOrOthers">
                                        <div class="box-title">
                                            <h4><i class="fa fa-table"></i>符合条件的日程信息</h4>
                                            <div class="tools">
                                                <i id="clipListRefresh" class="fa fa-refresh fa-spin" placeholder="刷新" ng-click="loadClipList()"></i>
                                            </div>
                                        </div>
                                        <div class="box-body" style="overflow: auto;height: 540px">
                                            <table class="table table-hover" >
                                                <thead>
                                                <tr>
                                                    <th style="width:40%">内容</th>
                                                    <th style="width:20%">好友</th>
                                                    <th style="width:40%">处理</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr ng-repeat="item in clipsBookForMe|filter:inputClipName">
                                                    <td style="width:45%;padding-left:0;padding-right:0" ng-bind="item.name" ng-click="ClipBookDetailShow(item.id)"></td>
                                                    <td style="width:25%;padding-left:0;padding-right:0" ng-bind="friendNameShow(item.bookerId)" ng-click="ClipBookDetailShow(item.id)"></td>
                                                    <td style="width:30%;padding-left:0;padding-right:0" class="no-padding" ng-show="item.status=='DRAFT'">
                                                        <button class="btn-xs btn-success" ng-click="confirmClip(item.id)">接受</button>
                                                        <button class="btn-xs btn-danger" ng-click="refuseClip(item.id)">拒绝</button>
                                                    </td>
                                                    <td style="width:40%;padding-left:0;padding-right:0" ng-show="item.status=='CONFIRM'">
                                                        <i class="fa fa-check" style="color:mediumspringgreen"></i>
                                                    </td>
                                                    <td style="width:40%;padding-left:0;padding-right:0" ng-show="item.status=='CANCEL'">
                                                        <i class="fa fa-close" style="color:red"></i>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div data-ui-view="CalOrInput"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /BOX -->
                    </div>
                </div>
                <!-- /CALENDAR -->
                <div class="footer-tools">
							<a class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</a>
                </div>
            </div><!-- /CONTENT-->
        </div>
    </div>
</div>
